<template>
  <mu-flex id="root" direction="column">
    <mu-appbar id="appBar" :z-depth="2" color="primary" title="社区健康"></mu-appbar>

    <Home v-if="navValue === 'home'"></Home>
    <Message v-if="navValue === 'message'"></Message>
    <UserProfile v-if="navValue === 'user'"></UserProfile>

    <mu-paper class="nav-wrapper">
      <mu-bottom-nav color="primary" :value.sync="navValue">
        <mu-bottom-nav-item value="home" title="主页" icon="home"></mu-bottom-nav-item>
        <mu-bottom-nav-item value="message" title="消息" icon="message"></mu-bottom-nav-item>
        <mu-bottom-nav-item value="user" title="个人" icon="person"></mu-bottom-nav-item>
      </mu-bottom-nav>
    </mu-paper>
  </mu-flex>
</template>

<script lang="ts">
  import Home from './Home.vue'
  import Message from './Message.vue'
  import UserProfile from './UserProfile.vue'

  import news from '../../../phr/mock/HomeMock.js';
  import NewsService from '../../../phr/service/knowledge/HealthKnowledgeService';
  import {SUCCESS} from '../../common/ErrorCode';

  let constant = {
    network_error: '网络异常',
    modules: [
      [
        {icon: require('@/assets/icon/pills.svg'), title: '药品信息', routeName: 'MedicineInformation'},
        {icon: require('@/assets/icon/heartbeat.svg'), title: '健康指数', routeName: 'HealthIndex'},
        {icon: require('@/assets/icon/medical-journal.svg'), title: '健康档案', routeName: ''},
        {icon: require('@/assets/icon/syringe.svg'), title: '计划免疫', routeName: ''},
      ], [
        {icon: require('@/assets/icon/marker.svg'), title: '就医地图', routeName: 'Map'},
        {icon: require('@/assets/icon/stethoscope.svg'), title: '自助挂号', routeName: 'Registration'},
        {icon: require('@/assets/icon/nurse.svg'), title: '服务评价', routeName: ''},
        {icon: require('@/assets/icon/tablet.svg'), title: '诊疗记录', routeName: 'MedicalRecord'},
      ]
    ],
  };

  export default {
    components: {
      Home,
      Message,
      UserProfile
    },
    data() {
      return {
        modules: constant.modules,
        activeTab: 0,
        tabs: {
          0: '综合资讯',
          1: '生活保健',
          2: '疾病科普',
          3: '养老资讯'
        },
        newsList: news,
        defaultImage: require('@/assets/img/default-image.jpg'),
        navValue: 'home',
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.getNews(3, 0);
        this.getNews(0, 1);
        this.getNews(1, 2);
        this.getNews(2, 3);
      });
    },
    methods: {
      onModuleClick(value) {
        this.$router.push({name: value});
      },
      onItemClick(value) {
        this.$router.push({
          name: 'NewsDetail',
          params: {title: this.tabs[value.tab], article: value.article}
        });
      },
      getNews(type, tabIndex) {
        NewsService.getArticleByType(type, 1)
            .then((res) => {
              if (res.code === SUCCESS) {
                this.newsList.splice(tabIndex, 1, res.value.value);
              } else {
                this.$toast.info(res.message);
              }
            })
            .catch((e) => {
              console.log(e);
              this.$toast.info(constant.network_error);
            });
      },
      onMoreNewsClick() {
        this.$router.push({name: 'MoreNews'});
      }
    }
  }
</script>
<style scoped>
  #root {
    width: 100%;
    height: 100%;
    position: absolute;
    background: #f5f5f5;
  }

  #appBar {
    width: 100%;
  }

  #content {
    overflow: auto;
    flex: 1 1 0 !important;
    width: 100%;
  }

  .module-pane {
    margin: 8px auto;
    padding: 8px;
    background: white;
  }

  .module-title {
    line-height: 1.5;
  }

  .module-pane .mu-button {
    padding-top: 8px;
    width: 100%;
    height: auto;
  }

  .news-pane {
    padding: 0;
    margin: 8px auto;
    background: white;
  }

  .item-content {
    padding: 8px 0;
    width: 100%;
  }

  .item-content-text {
    overflow: hidden;
  }

  .item-content img {
    width: 100px;
    height: 80px;
    margin-left: 8px;
    object-fit: contain;
    flex-shrink: 0;
  }

  .item-title {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #212121;
  }

  .item-desc {
    font-size: 14px;
    line-height: 1.5;
    padding: 0;
    color: #616161;
    font-weight: 400;
    margin: 0;
    box-sizing: border-box;
    height: 42px;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .item-author {
    margin-top: 8px;
    line-height: 1.5;
    font-size: 12px;
    color: #616161;
  }

  .mu-divider {
    padding: 0 16px;
  }

  #more-news {
    width: 100%;
  }

  .nav-wrapper {
    width: 100%;
  }
</style>
<style>
</style>